<template>

        <div class="login-container">
            <div class="login-box">
                <!-- 头像 -->
               <div class="avatar_box">
                   <img src="../assets/logo.png" alt="">
               </div>
               
               <!-- 表单 -->
                <el-form label-width="0px" class="login_form" :rules="rules" :model="form" ref="ruleForm" >
                <el-form-item  prop="username">
                    <el-input prefix-icon='el-icon-user-solid' v-model="form.username"></el-input>
                </el-form-item>
    
             
                <el-form-item  prop="password">
                    <el-input prefix-icon='el-icon-unlock' v-model="form.password" type="password"></el-input>
                </el-form-item>
                </el-form>

                <!-- 按钮 -->
                <el-form>
                <el-form-item class="btns">
                <el-button type="primary"  @click="submitForm('ruleForm')">登录</el-button>
                <el-button type="info" @click="resetForm('ruleForm')">重置</el-button>
                </el-form-item>
                </el-form>

            </div>
        </div>

</template>

<script>
export default {
    data(){
        return{
            form:{
                username:'admin',
                password:'123456'
            },
            rules: {
                 username: [
                { required: true, message: '请输入登录名称',trigger:'blur' },
                { min: 3, max: 5,message:'长度3-5个字符',trigger:'blur' },
                 ],
                password:[
                 { required: true, message: '请输入登录密码',trigger:'blur' },
                 { min: 6, max: 15,message:'长度6-15个字符',trigger:'blur' }
                ]
            },
                ruleForm: {
                    username: '',
                    password: '',
                 },
            };
        },

    methods: {
        resetForm(ruleForm) {
        this.$refs[ruleForm].resetFields();
      },
        
        submitForm(ruleForm) {
        this.$refs[ruleForm].validate(async valid => {
          if (valid) {
                 this.$message.success('账号正确')
          } else {
                this.$message.error('账号错误')
                return false;
              }

             const {data} = await this.$http.post('/login',this.form)

             if(data.meta.status!==200){
                this.$messagemessage.error('网站登录失败');
             }
                this.$message.success('网站登录成功');  

            window.sessionStorage.setItem('token',data.data.token)
            this.$router.push('/home')
        });

      },
        resetForm(ruleForm) {
            this.$refs[ruleForm].resetFields();
            }
        }
    }


</script>

<style lang="less" scoped>
    .login-container {
        background-color: rgb(104, 104, 194);
        height: 100%;
    }

    .login-box {
        position: absolute;
        width: 450px;
        height: 300px;
        background-color: #fff;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);


            .avatar_box {
                position: absolute;
                transform:translate(50%, -50%);
                height: 100px;
                width: 100px;
                padding: 10px;
                box-shadow: 0 0 0px 0 #eee;
                top:3%;
                left: 23%;
                cursor: pointer;
                overflow: hidden;
                img {
                    position: relative;
                    width: 80px;
                    height: 80px;
                    border: solid 5px #eee;
                    border-radius: 50%;
                    background-color: #eee; 
                }
            }
    }

            .btns {
                display: flex;
                flex-direction: row;
                margin-left: 30%;
            }
            .login_form {
                width: 60%;
                margin-top: 100px;
                margin-left: 20%;
            }
</style>
